/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/* eslint-disable react/no-did-update-set-state */
/* eslint-disable react/sort-comp */
/* eslint-disable react/require-default-props */
/* eslint-disable react/jsx-no-bind */
/**
 * 基础数据，站点，网点信息共用组件
 *  */
import React, { Component } from 'react';
import { Table, Button, Modal, Row, Col, Popconfirm } from 'antd';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import InfoCheck from '@/components/InfoCheck';

@connect(({ allocation, setting }) => ({
  allocation,
  ...setting,
}))
export default class StationRecord extends Component {
  static propTypes = {
    type: PropTypes.string, // 判断是站点页面还是网点页面  站点：station，网点：outlets
    dataSource: PropTypes.array, // 表格的数据
    submit: PropTypes.func, // 提交的方法
    setFormVlaue: PropTypes.func, // 设置模态框的表单值
    handleDelet: PropTypes.func, // 删除的方法
    clearTimer: PropTypes.func, // 网点页面清空验证码计时器
    editOutlets: PropTypes.func, // 网点页面，渲染编辑的modal内容
    addNewOutlets: PropTypes.func, // 网点页面，渲染新增的modal内容
    loading: PropTypes.bool, // 统一的loading效果
    confirmLoading: PropTypes.bool, // modal框的提交loading
  };

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      newAdd: false,
    };
    this.columns =
      this.props.type === 'station'
        ? [
            {
              title: '站点名称',
              dataIndex: 'site_name',
              key: 'site_id',
              align: 'center',
            },
            {
              title: '负责人',
              dataIndex: 'site_charge',
              key: 'site_charge',
              align: 'center',
            },
            {
              title: '手机号',
              dataIndex: 'site_phone',
              key: 'site_phone',
              align: 'center',
            },
            {
              title: '操作',
              align: 'center',
              render: (text, record) => (
                <Row type="flex" justify="space-around">
                  <Col>
                    <a
                      onClick={this.toggleModal.bind(this, {
                        visible: true,
                        record,
                        newAdd: false,
                      })}
                    >
                      编辑
                    </a>
                  </Col>
                  <Col>
                    <Popconfirm
                      placement="top"
                      title="是否删除？"
                      onConfirm={this.handleDelet.bind(this, record)}
                      okText="确定"
                      cancelText="取消"
                    >
                      <a>删除</a>
                    </Popconfirm>
                  </Col>
                </Row>
              ),
            },
          ]
        : [
            {
              title: '品牌',
              dataIndex: 'brand',
              key: 'brand',
              align: 'center',
            },
            {
              title: '网点编号',
              dataIndex: 'branch_code',
              key: 'branch_code',
              align: 'center',
            },
            {
              title: '网点名称',
              dataIndex: 'branch_name',
              key: 'branch_name',
              align: 'center',
            },
            {
              title: '操作',
              align: 'center',
              render: (text, record) => (
                <Row type="flex" justify="space-around">
                  <Col>
                    <a
                      onClick={this.toggleModal.bind(this, {
                        visible: true,
                        record,
                        newAdd: false,
                      })}
                    >
                      编辑
                    </a>
                  </Col>
                  <Col>
                    <Popconfirm
                      placement="top"
                      title="是否删除？"
                      onConfirm={this.handleDelet.bind(this, record)}
                      okText="确定"
                      cancelText="取消"
                    >
                      <a>删除</a>
                    </Popconfirm>
                  </Col>
                </Row>
              ),
            },
          ];
    this.toggleModal = this.toggleModal.bind(this);
  }

  componentDidUpdate(prevProps) {
    const {
      options: { key },
    } = this.props;
    if (prevProps.area_id !== this.props.area_id && key == 'yz') {
      this.getList();
    }
  }

  getList = () => {
    const {
      dispatch,
      type,
      options: { key },
      area_id,
    } = this.props;
    const reqZoneId = key == 'yz' ? area_id : null;
    const url = type === 'station' ? 'station/getStationList' : 'allocation/getPostList';
    dispatch({
      type: url,
      payload: {
        area_id: reqZoneId,
      },
    });
  };

  toggleModal = ({ visible, record = {}, newAdd }) => {
    const { type, editOutlets, addNewOutlets, clearTimer } = this.props;
    !visible && clearTimer && clearTimer(); // 清除网点信息编辑时的验证码倒计时

    if (type === 'outlets') {
      // 判断是显示新增还是修改的modal样式（网点设置）
      newAdd ? addNewOutlets() : editOutlets(record);
    }

    this.setState({
      visible,
      newAdd,
    });
    this.setFormVlaue(record);
  };

  setFormVlaue = record => {
    // 设置模态框表单的值
    const { setFormVlaue } = this.props;
    setFormVlaue && setFormVlaue(record);
  };

  handleOk = () => {
    const { submit, allocation } = this.props;
    const { type } = allocation;
    submit(this.toggleModal, type);
  };

  handleCancle = () => {
    this.toggleModal({ visible: false });
  };

  handleInfoReady(data) {
    // 检查信息
    if (!data.name) return;
    this.getList();
  }

  handleDelet(record) {
    const { handleDelet } = this.props;
    handleDelet(record);
  }

  render() {
    const {
      dataSource,
      type,
      children,
      loading,
      confirmLoading,
      options: { key } = {},
    } = this.props;
    const { visible, newAdd } = this.state;

    const stationName = key === 'yz' ? '片区' : '站点';

    const title =
      type === 'station'
        ? `${newAdd ? '添加' : '编辑'}${stationName}`
        : `${newAdd ? '添加' : '编辑'}网点`;
    return (
      <InfoCheck onReady={this.handleInfoReady.bind(this)}>
        <Row style={{ marginBottom: 24 }}>
          <Col>
            <Button
              type="primary"
              onClick={this.toggleModal.bind(this, { visible: true, newAdd: true })}
            >
              新增
              {type === 'station' ? stationName : '网点'}
            </Button>
          </Col>
        </Row>
        <Table
          columns={this.columns}
          dataSource={dataSource}
          rowKey={record => (type === 'station' ? record.site_id : record.id)}
          loading={loading}
          pagination={false}
        />
        <Modal
          title={title}
          visible={visible}
          onCancel={this.handleCancle}
          onOk={this.handleOk}
          confirmLoading={loading || confirmLoading}
          destroyOnClose
        >
          {children}
        </Modal>
      </InfoCheck>
    );
  }
}
